<template>
    <div class="container">
      <p class="title"><span>网校老师</span><el-icon :size="18">
          <ArrowRight />
        </el-icon></p>
      <swiper :modules="[Autoplay]" :slides-per-view="4" :space-between="50" :autoplay="{ delay: 2500, disableOnInteraction: false }" @swiper="onSwiper" @slideChange="onSlideChange">
        <swiper-slide v-for="item in cards" :key="item.name">
          <el-card class="the-card">
            <div>
              <img class="card-image" :src="item.avator" alt="Teacher Avatar">
              <p>
                <span>{{ item.name }}</span>
                <span>{{ item.desc }}</span>
              </p>
            </div>
          </el-card>
        </swiper-slide>
      </swiper>
    </div>
  </template>
  
  <script setup>
  import { reactive } from 'vue';
  import { ArrowRight } from '@element-plus/icons-vue';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { Autoplay } from 'swiper';
  import 'swiper/css';
  
  const cards = reactive([
    { avator: 'path/to/image1.jpg', name: '郑伟', desc: '中国经济师' },
    { avator: 'path/to/image2.jpg', name: '郑伟', desc: '中国经济师' },
    { avator: 'path/to/image3.jpg', name: '郑伟', desc: '中国经济师' },
    { avator: 'path/to/image4.jpg', name: '郑伟', desc: '中国经济师' },
    { avator: 'path/to/image5.jpg', name: '郑伟', desc: '中国经济师' },
    { avator: 'path/to/image6.jpg', name: '郑伟', desc: '中国经济师' },
    { avator: 'path/to/image7.jpg', name: '郑伟', desc: '中国经济师' }
  ]);
  
  function onSwiper(swiper) {
    console.log('Swiper instance:', swiper);
  }
  
  function onSlideChange() {
    console.log('Slide changed');
  }
  </script>
  
  <style scoped>
  .container .title {
    font-size: 32px;
    font-weight: bold;
    line-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .the-card {
    width: 290px;
    flex-shrink: 0;
  }
  
  .card-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
  }
  </style>